<template>
    <!-- 图片上传 -->
    <div class="uploader shadow-camera bg-white">
        <div v-for="(image, index) in value"
            :key="index"
            class="item-wrap">
            <img class="image" :src="image" mode="aspectFill">
        </div>
        <div v-if="value.length < 9" class="item-wrap">
            <div class="request" @click="onClickRequest">
                <div class="icon">&#xe617;</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    api,
} from '@/lib/api';

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
    name: 'Uploader',
})
export default class Uploader extends Vue {
    @Prop({ type: Array, default() { return []; } }) public value!: string[];

    /**
     * 上传图片
     */
    public async onClickRequest() {
        const chooseRes = await api.chooseImage({
            size: 9 - this.value.length,
        });
        if (chooseRes.errMsg.indexOf('chooseImage:ok') < 0) {
            wx.showToast({
                title: '选择图片失败',
                icon: 'none',
            });
            return;
        }
        const result = this.value.concat(chooseRes.tempFilePaths);
        this.$emit('input', result);
    }
}
</script>

<style lang="less">

@import "../../lib/style/mixins.less";


</style>
